<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情</title>
		<script src="./js/vue.js"></script>
		<script src="./js/index.js"></script>
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.header {
			width: 100%;
			height: auto;
			margin-top: 30px;
		}

		.header .header-center {
			height: auto;
			width: 1200px;
			margin: auto;
		}

		.logo {
			width: 293px;
			height: 61px;
			display: inline-block;
		}

		.search {
			width: 400px;
			height: 61px;
			display: inline-block;
			margin-left: 60px;
			vertical-align: top;
		}

		.call-me {
			width: 210px;
			height: 61px;
			display: inline-block;
			margin-left: 120px;
			vertical-align: top;
		}

		.call-me i {
			font-size: 40px;
			display: inline-block;
			position: relative;
			top: 3px;
			color: #1362b0;
		}

		.call-me .phonenumber {
			display: inline-block;
		}

		.call-me span {
			display: block;
			height: 20px;
			position: relative;
			top: 10px;
			font-size: 12px;
		}

		.call-me strong {
			display: block;
			height: 41px;
			position: relative;
			font-size: 22px;
			font-weight: bold;
			top: 5px;
			color: #1362b0;
		}

		a {
			text-decoration: none;
		}

		.header-menue {
			width: 100%;
			background-color: #1362b0;
			margin-top: 20px;
		}

		.header-menue .el-menu-demo {
			width: 1000px;
			margin: auto;
			border-bottom: none;
		}

		.header-menue .el-menu-demo a {
			font-size: 16px;
		}
	</style>
	<body>
		<div id="app">
			<div class="header">
				<div class="header-center">
					<div class="logo">
						<el-image :fit="fit" :src="src">
						</el-image>
					</div>
					<div class="search">
						<el-input placeholder="请输入关键字" v-model="input" clearable style="top: 10px; width: 400px;">
							<el-button slot="append" style="background-color: #1362b0; color: white;">搜索</el-button>
						</el-input>
					</div>
					<div class="call-me">
						<i class="el-icon-phone-outline"></i>
						<div class="phonenumber">
							<span>24小时咨询热线</span>
							<strong>010-12345678</strong>
						</div>
					</div>
				</div>
			</div>
			<div class="header-menue">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#1362b0"
					text-color="#fff" active-text-color="#fff">
					<el-menu-item index="1"><a href="#">网站首页</a></el-menu-item>
					<el-menu-item index="2"><a href="#">宏观形势</a></el-menu-item>
					<el-menu-item index="3"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="4"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="5"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="6"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="7"><a href="#">政策数据库</a></el-menu-item>
					<el-menu-item index="8"><a href="#">政策数据库</a></el-menu-item>
				</el-menu>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					src: "./img/logo2.png",
					input: "",
					fit: "fill",
					activeIndex: "1"
				}
			}
		})
	</script>
</html>
